<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .ac {
            color: #e00;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :style="{ width: divWidth }">box1</div>
        <!-- 样式绑定一个对象，也可以和原生样式一起使用，最终渲染结果会合并 -->
        <div :style="styleObj" style="color: #fff">box2</div>

        <!-- 可以直接把data作为class使用 -->
        <div :class="className">box</div>
        <!-- 三目运算表达式绑定class -->
        <div :class="active ? 'ac' : '' ">box3</div>
        <div :class="{ 'ac': active }">box3------test</div>
        <!-- 绑定对象 -->
        <div :class="{ ac: active }">box4</div>
        <!-- 绑定数组 -->
        <div :class="[className, className2, 'ac']">box5</div>
        <!-- 绑定数组里再嵌套对象 -->
        <div :class="[className, className2, { ac: active }]">box6</div>
        <!-- 绑定的class和原生class可以共存，会合并到一起 -->
        <div :class="[className, className2]" class="ac">box7</div>
        <div class="ac" :class="[className, className2]">box7</div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                divWidth: '200px',
                styleObj: {
                    height: '300px',
                    width: '300px',
                    backgroundColor: 'red'
                },
                active: true,
                className: 'current',
                className2: 'current2'
            }
        })
    </script>
</body>

</html>